<template>
  <div class="components-container">
    <div class="search-container">
      <input
        type="text"
        autocomplete="false"
        placeholder="Input the name of the module you want to search"
        class="search-input"
        v-model="searchInput"
        style="font-size: 14px"
      />
      <el-button
        type="primary"
        style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;background-color: #1479d7;font-size: 16px;padding-right: 10px;padding-left: 10px;font-size: 14px;}"
      >
        <!-- <el-icon><Search></Search></el-icon> -->
        <font-awesome-icon icon="magnifying-glass" style="margin-right: 5px" />
        Search
      </el-button>
    </div>
    <div class="describe-container">
      <div class="list">
        <el-tree
          :data="dataList"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="detail" v-show="showModuleInfo">
        <div class="moduleInfo" v-show="!showDataInfo" :v-model="moduleInfo">
          <div class="title">
            <span>{{ moduleInfo.title }}</span>
          </div>
          <div class="content">
            <div class="content-item">
              <div class="item-title">
                <span>Abstract</span>
              </div>
              <div class="item-content">
                <p>{{ moduleInfo.attribute.abstract }}</p>
              </div>
            </div>
            <div class="content-item" style="position: relative">
              <div class="item-title" style="margin-bottom: 6px">
                <span> Invocation Parameters </span>
              </div>
              <div class="item-content">
                <el-table
                  :data="moduleInfo.parameters"
                  border
                  style="width: 100%; font-size: 10px"
                  cell-class-name="cellStyle"
                  header-cell-class-name="tableHeader"
                >
                  <el-table-column prop="Name" label="Name" />
                  <el-table-column prop="Description" label="Description" />
                  <el-table-column prop="IsFile" label="Isfile" width="60">
                  </el-table-column>
                </el-table>
              </div>
            </div>

            <div class="content-item" style="position: relative">
              <div class="item-title" style="margin-bottom: 6px">
                <span> Input Files </span>
              </div>
              <div class="item-content">
                <el-table
                  :data="moduleInfo.inputData"
                  border
                  style="width: 100%; font-size: 10px"
                  cell-class-name="cellStyle"
                  header-cell-class-name="tableHeader"
                >
                  <el-table-column prop="name" label="Name" />
                  <el-table-column prop="description" label="Description" />
                  <el-table-column prop="type" label="Type" width="50">
                  </el-table-column>
                  <el-table-column prop="schema" label="Schema" />
                </el-table>
              </div>
            </div>

            <div class="content-item" style="position: relative">
              <div class="item-title" style="margin-bottom: 6px">
                <span> Output Files </span>
              </div>
              <div class="item-content">
                <el-table
                  :data="moduleInfo.outputData"
                  border
                  style="width: 100%; font-size: 10px"
                  cell-class-name="cellStyle"
                  header-cell-class-name="tableHeader"
                >
                  <el-table-column prop="name" label="Name" />
                  <el-table-column prop="description" label="Description" />
                  <el-table-column prop="type" label="Type" width="50">
                  </el-table-column>
                  <el-table-column prop="schema" label="Schema" />
                </el-table>
              </div>
            </div>

            <div class="content-item">
              <div class="item-title" style="margin: 6px 0px">
                <span> Metadata </span>
              </div>
              <div class="item-content" style="">
                <p style="width: 100%; font-size: 10px; font-weight: bold">
                  File Scheme
                </p>
                <div class="cdm">
                  <Codemirror
                    v-model="moduleInfo.scheme.fileScheme"
                    :extensions="extensions"
                    style="font-size: 8px"
                  ></Codemirror>
                </div>
              </div>
              <div class="item-content" style="">
                <p style="width: 100%; font-size: 10px; font-weight: bold">
                  Data Scheme
                </p>
                <div class="cdm">
                  <Codemirror
                    v-model="moduleInfo.scheme.dataScheme"
                    :extensions="extensions"
                    style="font-size: 8px"
                  ></Codemirror>
                </div>
              </div>
              <div class="item-content" style="">
                <p style="width: 100%; font-size: 10px; font-weight: bold">
                  Unit Scheme
                </p>
                <div class="cdm">
                  <Codemirror
                    v-model="moduleInfo.scheme.unitScheme"
                    :extensions="extensions"
                    style="font-size: 8px"
                  ></Codemirror>
                </div>
              </div>
            </div>
            <!-- <div class="content-item">
              <div class="item-title" style="margin: 6px 0px">
                <span> 代码示例 </span>
              </div>
              <div
                class="item-content"
                style="
                  background: #fafafa;
                  border-color: #ededed;
                  border-width: 1px;
                  border-style: solid;
                  padding: 0px 5px;
                  white-space: pre;
                "
              >
                <p style="line-height: 1.2">
                  {{ moduleInfo.codeExample }}
                </p>
              </div>
            </div> -->

            <div class="content-item">
              <div class="item-title" style="margin: 6px 0px">
                <span> Contributor </span>
              </div>
              <div class="item-content" style="">
                <p style="line-height: 1.2; margin-top: 0px">
                  Provider: {{ moduleInfo.attribute.provider }}
                </p>
                <p style="line-height: 1.2">
                  Email: {{ moduleInfo.attribute.email }}
                </p>
                <p style="line-height: 1.2">
                  Copyright: {{ moduleInfo.attribute.copyright }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Codemirror } from "vue-codemirror";
import { xml } from "@codemirror/lang-xml";
import { config } from "../ModelingComponents/Config.js";
export default {
  data() {
    return {
      extensions: [xml()],
      Hydrology: [
        // { label: "FDS", moduleId: "6ba2b050-9962-3ea1-225b-949991b4cb5d" },
        // {
        //   label: "Crest",
        //   moduleId: "86823a71-c95c-6b66-ea0d-8839d6db8ec5",
        // },
      ],
      Pedology: [],
      Meteorology: [],
      Ecology: [],
      Socioeconomics: [],
      Others: [],
      dataList: [
        {
          id: 1,
          label: "Hydrology",
          children: [],
        },
        {
          id: 2,
          label: "Edaphology",
          children: [],
        },
        {
          id: 3,
          label: "Meteorology",
          children: [],
        },
        {
          id: 4,
          label: "Ecology",
          children: [],
        },
        {
          id: 5,
          label: "Socio-Economic",
          children: [],
        },
        {
          id: 6,
          label: "Others",
          children: [],
        },
      ],
      searchInput: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      moduleInfo: {
        title: "",
        attribute: {
          abstract: "FDS火灾模型",
          keyword: "灾害模型;火灾",
          provider: "张丰源",
          email: "FengyuanZhang@163.com",
          copyright: "美国国家标准技术局开发",
        },
        parameters: [
          {
            name: "FDSData",
            isfile: "fds",

            description: "FDS参数文件",
          },
        ],
        inputData: [
          {
            name: "FDSData",
            type: "fds",
            description: "FDS参数文件",
            schema: "OMF_File.Par",
          },
        ],
        outputData: [
          {
            name: "FDSData",
            type: "fds",
            description: "FDS参数文件",
            schema: "OMF_File.Par",
          },
        ],
        scheme: {
          fileScheme: "",
          dataScheme: "",
          unitScheme: "",
        },
      }, //模块信息
      modules: [],
      parameterTableData: [
        {
          name: "FDSData",
          description: "FDS参数文件",
          type: "fds",
          option: "false",
        },
        {
          name: "Result",
          option: "false",
          type: "ZIP",
          description: "FDS输出文件，包含室内火灾蔓延路径，起火点和熄火点",
        },
      ], //参数信息
      showDataInfo: false,
      showModuleInfo: false, //是否展示模块信息
    };
  },
  methods: {
    handleNodeClick(data) {
      if (data.id == null) {
        const _this = this;
        this.moduleInfo.title = data.label;
        for (let index = 0; index < this.modules.length; index++) {
          if (this.modules[index].attribute_info.name == data.label) {
            // 属性信息
            this.moduleInfo.attribute.abstract =
              this.modules[index].attribute_info.abstract;
            this.moduleInfo.attribute.keyword =
              this.modules[index].attribute_info.keywords;
            this.moduleInfo.attribute.provider =
              this.modules[index].attribute_info.provider;
            this.moduleInfo.attribute.email =
              this.modules[index].attribute_info.email;
            this.moduleInfo.attribute.copyright =
              this.modules[index].attribute_info.copyright;

            // 参数信息
            this.moduleInfo.parameters =
              this.modules[index].operation_info.Parameters;
            // 输入文件信息
            this.moduleInfo.inputData = this.modules[index].input_info;
            // 输出文件信息
            this.moduleInfo.outputData = this.modules[index].output_info;
            // scheme信息
            this.moduleInfo.scheme.dataScheme = this.modules[index].OMF_Data;
            this.moduleInfo.scheme.fileScheme = this.modules[index].OMF_File;
            this.moduleInfo.scheme.unitScheme = this.modules[index].OMF_Units;
          }
          const element = this.modules[index];
        }
        // for (let index = 0; index < this.modules.length; index++) {
        //   const element = this.modules[index];
        //   if (element.id == data.moduleId) {
        //     this.moduleInfo.attribute.abstract = element.description;
        //     let keywords = "";
        //     element.keyword.forEach((element) => {
        //       keywords += element;
        //     });
        //     this.moduleInfo.attribute.keyword = keywords;
        //     this.moduleInfo.attribute.provider = element.provider;
        //     this.moduleInfo.attribute.email = element.email;
        //     this.moduleInfo.attribute.copyright = element.copyright;
        //     this.moduleInfo.inputData = element.inputData;
        //     this.moduleInfo.outputData = element.outputData;
        //     this.moduleInfo.scheme.fileScheme = element.fileScheme;
        //     this.moduleInfo.scheme.dataScheme = element.dataScheme;
        //     this.moduleInfo.codeExample = element.codeExample;
        //   }
        // }
        this.showModuleInfo = true;
      }
    },
    handleEdit(index, row) {
      // this.showDataInfo = true;
      // axios.get("http://172.21.212.124:8181/getDataInfo").then((res) => {
      //   console.log(res.data);
      // });
    },
    getModuleInfo() {
      const _this = this;
      axios.get(config.httpIP + "getModels").then((res) => {
        _this.modules = res.data;
        for (let index = 0; index < res.data.length; index++) {
          const model = res.data[index];
          const type = model.attribute_info.type.split(";");
          for (let index1 = 0; index1 < type.length; index1++) {
            const element = String(type[index1]).trim();
            switch (element) {
              case "Hydrology":
                _this.Hydrology.push({
                  label: model.attribute_info.name,
                });
                break;

              case "Pedology":
                _this.Pedology.push({
                  label: model.attribute_info.name,
                });
                break;
              case "Meteorology":
                _this.Meteorology.push({
                  label: model.attribute_info.name,
                });
                break;
              case "Ecology":
                _this.Ecology.push({
                  label: model.attribute_info.name,
                });
                break;
              case "Socioeconomics":
                _this.Socioeconomics.push({
                  label: model.attribute_info.name,
                });
                break;

              default:
                var isDuplicate = false;
                // 遍历数组，检查是否有对象的label属性与model.attribute_info.name相等
                _this.Others.forEach((existingItem) => {
                  if (existingItem.label === model.attribute_info.name) {
                    isDuplicate = true;
                    return; // 一旦找到匹配项，立即停止循环
                  }
                });

                // 如果没有找到重复项，则添加新元素
                if (!isDuplicate) {
                  _this.Others.push({ label: model.attribute_info.name });
                }
                break;
            }
          }
        }
      });
    },
  },
  mounted() {
    this.getModuleInfo();
    this.dataList[0].children = this.Hydrology;
    this.dataList[1].children = this.Pedology;
    this.dataList[2].children = this.Meteorology;
    this.dataList[3].children = this.Ecology;
    this.dataList[4].children = this.Socioeconomics;
    this.dataList[5].children = this.Others;
  },
  components: { Codemirror },
};
</script>
<style lang="less" scoped>
.components-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
}
.search-container {
  position: relative;
  font-size: 14px;
  display: inline-flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0px 10px;
}
.search-container .search-input {
  -webkit-appearance: none;
  background-color: #f3f6f8;
  background-image: none;
  border-radius: 4px 0px 0px 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 32px;
  line-height: 32px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.describe-container {
  width: 100%;
  height: calc(100% - 32px);
  box-sizing: border-box;
  display: flex;
  padding-top: 10px;
  padding-left: 10px;
  position: relative;
}
.list {
  height: fit-content;
  width: 30%;
  border: 1px solid #ededed;
  font-family: "Times New Roman", "Microsoft Yahei", serif;
  color: #595959;
}
.detail {
  height: 100%;
  width: 70%;
  display: flex;
  flex-direction: column;
  font-family: "Times New Roman", "Microsoft Yahei", serif;
  color: #4d4d4d;
  /* 设置滚动条宽度和颜色 */
  position: relative;
}
.detail .moduleInfo {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.detail .moduleInfo::-webkit-scrollbar {
  width: 6px !important;
}

.detail .moduleInfo::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
}
.detail .moduleInfo:hover::-webkit-scrollbar-thumb {
  background-color: rgba(85, 85, 85, 0.4);
  cursor: pointer;
}
.detail .moduleInfo::-webkit-scrollbar-track {
  border-radius: 0;
  background: none;
}

.detail .title {
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  color: black;
}
.detail .content {
  width: 100%;
  height: calc(100% - 20px);
  padding-left: 10px;

  box-sizing: border-box;
}
.detail .content .content-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.detail .content .content-item .item-title {
  font-weight: bold;
  font-style: italic;
  color: black;
}
.detail .content .content-item .item-content {
  width: 100%;
  height: fit-content;
}
.detail .content .content-item .item-content p {
  margin: 6px 0px;
}
.detail .pover-card {
  position: absolute;
  z-index: 10;
  width: 92%;
  height: fit-content;
  min-height: 30px;
  background: #f4f4f4;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  top: 60px;
  left: 4%;
  color: #5f6477;
  border-color: rgb(237, 237, 237);
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
}

/deep/ .cellStyle .cell {
  line-height: unset;
  display: flex;
  justify-content: flex-start;
  padding: 0px 8px;
}
/deep/ .tableHeader .cell {
  line-height: unset;
}
.el-button.is-text:not(.is-disabled):hover {
  background-color: #1479d7;
  color: white;
}
.cdm {
  width: 100%;
  height: 200px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

// .editor:hover::-webkit-scrollbar-thumb {
//   background-color: rgba(85, 85, 85, 0.4);
//   cursor: pointer;
// }
</style>